<script>
var $, form, element, laytpl;
layui.config({
	base: '#(ctx)/manage/_assets/libs/layui/extends/'
}).extend({
	formSelects:'formSelects-v4.min'
}).use(['jquery', 'form', 'element', 'laytpl', 'formSelects'], function(){
	$ = layui.jquery, form = layui.form, element = layui.element, laytpl = layui.laytpl, formSelects = layui.formSelects;

	### 自定义验证规则
	form.verify({
		title : function(value, item) {
			if (value.length < 2 || value.length > 50) {
				return '标题必须2到50位字符';
			}
		},
	});

	### 图片预览监听
	$(".layui-form-item img").on("click", function(){
		Jfsa.reviewImage(this);
	});

	### 监听选择文件按扭
	$(".jfsa-select-image").on("click", function(){
		var elem = this;
		### 选择图片窗口
		Jfsa.selectFile(layer, {
			elem : "#" + this.id,
			type : 2,
			title : "选择图片",
			maxmin : false,
			area : [ '800px', '480px' ],
			closeBtn : 1,
			shadeClose : false,
			anim : 1,
			moveOut : false,
			resize : false,
			btn : [ '选择变色项', '取消' ],
			accept : "image",### 接受的文件类型
			multiple : false,### 是否多选
			updPath : '#(jfsa_upload_path)',### 上传路径，如果指定它，返回的res.folder将会是以它开头
			ctxPath : '#(ctx)',### 项目路径
		 	done : function(res){
				if(res.size > 0){
					var url = (res.folder == "" ? "/" : res.folder + "/") + res.files[0];
					var ipt = $(elem).attr("jfsa-input");
					if(ipt) $("#" + ipt).val(url);
					var img = $(elem).attr("jfsa-img");
					if(img) $("#" + img).attr("src", url);
				}
			},
			error : function(res){
			}
		});
	});

	### ckeditorConfig参数来自于导入的_import_ckeditor_js.html文件
	var pcEditor = CKEDITOR.replace( 'ID_case_content', ckeditorConfig);
	pcEditor.on( 'change', function( evt ) {
		$("#ID_case_content_input").html(evt.editor.getData());
	});

	### ckeditorConfig参数来自于导入的_import_ckeditor_js.html文件
	var h5Editor = CKEDITOR.replace( 'ID_case_content_h5', ckeditorConfig);
	h5Editor.on( 'change', function( evt ) {
		$("#ID_case_content_h5_input").html(evt.editor.getData());
	});

	var imageIndex = #(casesImageList.size());
	var imageRemoveSize=0;
	active = {
		addImage : function(obj){
			var callback = function(url){ ### 选择图片后的回调方法
				imageIndex++;
				var data = {status: "new", image: url, index: imageIndex};
				var getTpl = ID_img_box_tpl.innerHTML;

				laytpl(getTpl).render(data, function(html){
					$(".cases-imgs").append(html);
				});
				bindAction("#ID_img_idx_" + imageIndex);
				onImageItemChanged();
			};
			selectFile(obj, callback);
		}
		, changeImage : function(){
			var obj = $(this);
			var callback = function(url){ ### 选择图片后的回调方法
				obj.find(".cls-status").val("change");
				obj.find(".cls-image").val(url);
				obj.find("img").attr("src", url);
			};
			selectFile(obj, callback);
		}
		, removeImage : function(){
			var obj = $(this).parent().parent().parent();
			obj.find(".cls-status").val("remove");
			obj.hide();
			obj.remove();
			imageRemoveSize++;
			$("#ID_cases_imgs_remove").append(obj.find("input[type='hidden']"));
			onImageItemChanged();
		}
		, moveLeft : function(){
			if($(this).hasClass("layui-btn-disabled")) return;
			var obj = $(this).parent().parent().parent();
			var prev = obj.prev();
			obj.insertBefore(prev);
			onImageItemChanged();
		}
		, moveRight : function(){
			if($(this).hasClass("layui-btn-disabled")) return;
			var obj = $(this).parent().parent().parent();
			var next = obj.next();
			obj.insertAfter(next);
			onImageItemChanged();
		}
	};

	function onImageItemChanged(){
		$("#ID_cases_img_size").val($(".cases-imgs").children(".image-item").length + imageRemoveSize);
		var idx = 0;
		$(".cases-imgs .cls-sort-num").each(function(obj){
			idx++;
			$(this).val(idx);
		});
		$(".cases-imgs .cases-img-move").removeClass("layui-btn-disabled");
		$(".cases-imgs [data-type='moveLeft']").first().addClass("layui-btn-disabled");
		$(".cases-imgs [data-type='moveRight']").last().addClass("layui-btn-disabled");
		form.render();
		element.render();
	}

	### 打开选择文件窗口
	function selectFile(elem, callback){
		var data = {
			elem : elem,
			type : 2,
			title : "选择图片",
			maxmin : false,
			area : [ '800px', '480px' ],
			closeBtn : 1,
			shadeClose : false,
			anim : 1,
			moveOut : false,
			resize : false,
			btn : [ '选择变色项', '取消' ],
			accept : "image",### 接受的文件类型
			multiple : true,### 是否多选
			updPath : '#(jfsa_upload_path)',### 上传路径，如果指定它，返回的res.folder将会是以它开头
			ctxPath : '#(ctx)',### 项目路径
		 	done : function(res){
				if(res.size > 0){
					for(var i=0; i<res.size; i++ ){
						var url = (res.folder == "" ? "/" : res.folder + "/") + res.files[i];
						callback(url);
					}
				}
			},
			error : function(res){
			}
		};
		Jfsa.selectFile(layer, data);
	}

	function bindAction(elemName){
		$(elemName + ' a').on('click', function(){
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
	}

	bindAction(".cases-imgs");
	onImageItemChanged();
});

</script>